<template>
  <header class="header-wrap">
    <div class="left-menu-wrap" @click="changLeftMenuStatus">
      <img :class="$gloable_state.header.leftIcon=='back'?'left-back-img':'left-menu-img'">
      <span v-if="$gloable_state.header.leftIcon=='back'" style="color: white;">{{isPc?'':'返回'}}</span>
    </div>
    <span class="header-wrap__title">{{$gloable_state.header.title}}</span>
    <div class="avatar" @click="showBtn">
      <img :src="$gloable_state.userInfo.portrait">
      <div v-if="visableBtn">
        <button @click="clickBtn">{{$gloable_state.userInfo.unionid?'退出':'登陆'}}</button>
      </div>
    </div>
  </header>
</template>

<script>
   export default{
     name: 'AppHeader',
     props: {},
     data() {
       return {
         isWeiXin:M.isWeiXin,
         isPc:M.isPc,
         visableBtn: false,
       }
     },
     methods:{
       changLeftMenuStatus(){
         if(this.$gloable_state.header.leftIcon=="back"){
             this.$router.back();
         }
         vueApp.config.globalProperties.$gloable_state.visableLeftMenu=!vueApp.config.globalProperties.$gloable_state.visableLeftMenu
         if(vueApp.config.globalProperties.$gloable_state.visableLeftMenu){
           vueApp.config.globalProperties.$gloable_state.showCoverMask=true;
         }else {
           vueApp.config.globalProperties.$gloable_state.showCoverMask=false;
         }
       },
       showBtn(){
         if(this.isPc && this.isWeiXin){
           this.visableBtn=!this.visableBtn;
         }
       },
       clickBtn(){
         setTimeout(  ()=>  {
               this.visableBtn=false;
               MIO.signOut();
             }
         )
       },

     },
     mounted() {

     },
   }

</script>
<style>

.header-wrap {
  display: flex;
  width: 100vw;
  height: 14.22287vw;
  top:0;
  position: sticky;
  background-color: #339965;
  justify-content: space-between;
}
.header-wrap .header-wrap__title{
  color: white;
  line-height: 14.22287vw;
  letter-spacing:0.5vw;
  font-size: 6.8vw;
  /*background-color: pink;*/
}

.left-back-btn {
  width: 24vw;
  height: 44px;
  top:0;
  position: relative;
}

.left-menu-wrap{
  width: 15vw;
  padding-top:  4vw;
  padding-left: 4.39882vw;
}

.left-menu-wrap .left-menu-img{
  width: 6.49266vw;
  vertical-align:middle;
  content: url("https://langjie.oss-cn-hangzhou.aliyuncs.com/space/root/project/ruyunsuixing/img/san_heng.png");
}

.left-menu-wrap .left-back-img{
  width: 2.49266vw;
  vertical-align:middle;
  content: url("https://langjie.oss-cn-hangzhou.aliyuncs.com/space/root/project/ruyunsuixing/img/white_left.png");
}

.left-menu-wrap span{
  margin-left: 1.05278vw
}

.avatar img {
  height: 12vw;
  margin: 1vw 3vw;
  border-radius: 50%;

}

</style>